import * as React from 'react';

export type ComposerShellProps = {
  hint: string;
  caretVisible: boolean;
  plusColor: string;
};

export function ComposerShell({
  hint,
  caretVisible,
  plusColor,
}: ComposerShellProps): React.ReactElement {
  const shadowId = React.useId();
  const thinkingColor = '#468fc0';

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={900}
      height={125}
      viewBox="0 0 900 125"
      fill="none"
      fontFamily="Geist"
      role="img"
      aria-label={`${hint}. Thinking mode. Add, microphone, and stop controls.`}
      style={{display: 'block'}}
    >
      <defs>
        <filter
          id={shadowId}
          filterUnits="userSpaceOnUse"
          x={7}
          y={0}
          width={886}
          height={125}
          colorInterpolationFilters="sRGB"
        >
          <feDropShadow
            dx={0}
            dy={2}
            stdDeviation={2.2}
            floodColor="#000000"
            floodOpacity={0.055}
          />
        </filter>
      </defs>

      <rect width={900} height={125} fill="#ffffff" />
      <rect
        x={14.5}
        y={1.5}
        width={870}
        height={116}
        rx={30}
        fill="#ffffff"
        stroke="#dedede"
        strokeWidth={1}
        filter={`url(#${shadowId})`}
      />

      <text x={39} y={39.5} fontSize={18} fontWeight={400} fill="#909090">
        {hint}
      </text>
      {caretVisible && (
        <path
          d="M0 0H1.75V22H0Z"
          transform="translate(37 22)"
          fill="#828282"
        />
      )}

      <path
        d="M46.5 78.25V92.25M39.5 85.25H53.5"
        stroke={plusColor}
        strokeWidth={1.5}
        strokeLinecap="round"
      />

      <g stroke={thinkingColor} strokeLinecap="round" strokeLinejoin="round">
        <circle cx={87.25} cy={85.8} r={7.65} strokeWidth={1.65} />
        <path d="M85.2 75.1H89.3M87.25 75.1V77.4" strokeWidth={1.55} />
        <path d="M85.4 83.1L88.8 85.5" strokeWidth={2.15} />
      </g>
      <text
        x={105.25}
        y={91.25}
        fontSize={16}
        fontWeight={400}
        fill={thinkingColor}
      >
        Thinking
      </text>
      <path
        d="M178.6 84.2L182.65 88.25L186.7 84.2"
        stroke={thinkingColor}
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
      />

      <g stroke="#303030" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <rect x={801.9} y={77.15} width={5.8} height={10.6} rx={2.9} />
        <path d="M798.55 85.95A6.25 6.25 0 0 0 811.05 85.95M804.8 92.2V94.2M802.3 94.2H807.3" />
      </g>

      <circle cx={852.4} cy={85.75} r={20.5} fill="#ededed" />
      <rect x={846.1} y={79.45} width={12.6} height={12.6} rx={1.5} fill="#151616" />
    </svg>
  );
}