interface CornerBracketProps {
  size?: number;
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  color?: string;
  className?: string;
}

const rotationMap: Record<NonNullable<CornerBracketProps['position']>, string> = {
  'top-left': 'rotate(0deg)',
  'top-right': 'rotate(90deg)',
  'bottom-right': 'rotate(180deg)',
  'bottom-left': 'rotate(270deg)',
};

export default function CornerBracket({
  size = 40,
  position = 'top-left',
  color = '#c2c7ce',
  className,
}: CornerBracketProps) {
  return (
    <div
      className={className}
      style={{
        width: size,
        height: size,
        transform: rotationMap[position],
        flexShrink: 0,
      }}
      aria-hidden="true"
    >
      <svg
        width={size}
        height={size}
        viewBox="0 0 40 40"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <line x1="1" y1="1" x2="1" y2="18" stroke={color} strokeWidth="1" strokeLinecap="square" />
        <line x1="1" y1="1" x2="18" y2="1" stroke={color} strokeWidth="1" strokeLinecap="square" />
      </svg>
    </div>
  );
}
