import { Tabs } from '@ark-ui/react';
import { FC } from 'react';
import { Group, Stack } from '../../components';
import { SearchInput } from '../../components/SearchInput';
import { singSet } from '../../dataSet/sing';
import { Sign } from '../../types/sign';
import { twx } from '../../utils';

type SignProps = {
  onSelect: (sign: Sign) => void;
  selectedSign: string;
};

export const SignLibrary: FC<SignProps> = ({ onSelect, selectedSign }) => {
  return (
    <Stack className="h-full w-100 bg-white p-2">
      <p>Sign Library</p>
      <Tabs.Root className="w-full" defaultValue={'spv'}>
        <Tabs.List className="flex gap-6 border-b bg-white">
          <Tabs.Trigger
            className="aria-[selected=true]:border-b-blue aria-[selected=true]:text-blue border-b border-b-2 border-b-transparent bg-transparent p-1 pb-0.5"
            value="spv"
          >
            Sign
          </Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content className="relative overflow-hidden pt-2" value="spv">
          <Stack className="gap-2">
            <SearchInput placeholder="" onSearch={() => {}} />
            <Stack>
              {singSet.map((sign) => {
                return (
                  <Group
                    className={twx(
                      'items-center cursor-pointer border',
                      selectedSign === sign.id && 'bg-gray-200',
                    )}
                    onClick={() => onSelect(sign)}
                  >
                    <img className={'w-16'} src={sign.signImage}></img>
                    <p>{sign.name}</p>
                    <div className="i-ant-design-right-outlined m-2 ml-auto" />
                  </Group>
                );
              })}
            </Stack>
          </Stack>
        </Tabs.Content>
      </Tabs.Root>
    </Stack>
  );
};
