import React, { CSSProperties } from 'react';
import { LegendItemMarkRendererProps } from '../legend/types';
import { LineEncodingConfig } from './Encoder';

const MARK_WIDTH = 12;
const MARK_HEIGHT = 8;

const MARK_STYLE: CSSProperties = { display: 'inline-block' };

export default function DefaultLegendItemMarkRenderer({
  item,
}: LegendItemMarkRendererProps<LineEncodingConfig>) {
  return (
    <svg width={MARK_WIDTH} height={MARK_HEIGHT} style={MARK_STYLE}>
      <line
        stroke={item.output.stroke ?? 'none'}
        strokeWidth={item.output.strokeWidth ?? 2}
        strokeDasharray={item.output.strokeDasharray ?? 'none'}
        x1={0}
        x2={MARK_WIDTH}
        y1={MARK_HEIGHT / 2}
        y2={MARK_HEIGHT / 2}
      />
    </svg>
  );
}