'use client';
import { Checkbox } from '@/components/ui/checkbox';
import { cn } from '@/lib/utils';
import { useStreamChatStore } from '@/app/(main)/chat/[id]/stream-chat';
import { useTranslations } from 'next-intl';

type FontOption = {
  value: number;
  label: string;
  isStandard?: boolean;
};

export default function Font() {
  const t = useTranslations('chat.drawer.font');
  const chatSetting = useStreamChatStore((store) => store.chatSetting);
  const setChatSetting = useStreamChatStore((store) => store.setChatSetting);

  const fontOptions: FontOption[] = [
    { value: 12, label: 'A 12' },
    { value: 14, label: 'A 14' },
    { value: 16, label: 'A 16', isStandard: true },
    { value: 18, label: 'A 18' },
    { value: 20, label: 'A 20' },
  ];

  return (
    <div className="flex h-full flex-col">
      <div className="flex-1">
        <div className="flex flex-col gap-3">
          {fontOptions.map((option) => (
            <div
              key={option.value}
              className={cn(
                'bg-surface-element-normal flex h-12 cursor-pointer items-center justify-between rounded-lg px-5 transition-colors',
                chatSetting.font === option.value && 'bg-surface-element-hover'
              )}
              onClick={() => setChatSetting({ font: option.value })}
            >
              <div className="txt-title-s flex items-center gap-2">
                {option.label}
                {option.isStandard && (
                  <span className="txt-body-m text-txt-secondary-normal">({t('standard')})</span>
                )}
              </div>
              <Checkbox shape="round" checked={chatSetting.font === option.value} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
