'use client';

import { useKBar } from 'kbar';
import { Icons } from '@/components/icons';
import { Button } from './ui/button';

export default function SearchInput({ compact = false }: { compact?: boolean }) {
  const { query } = useKBar();

  if (compact) {
    return (
      <Button
        variant='outline'
        size='icon'
        className='bg-background text-muted-foreground size-9 shadow-none'
        onClick={query.toggle}
        aria-label='ค้นหา'
      >
        <Icons.search className='h-4 w-4' />
      </Button>
    );
  }

  return (
    <div className='w-full space-y-2'>
      <Button
        variant='outline'
        className='bg-background text-muted-foreground relative h-9 w-full justify-start rounded-[0.5rem] text-sm font-normal shadow-none sm:pr-12 md:w-40 lg:w-64'
        onClick={query.toggle}
      >
        <Icons.search className='mr-2 h-4 w-4' />
        ค้นหา...
        <kbd className='bg-muted pointer-events-none absolute top-[0.3rem] right-[0.3rem] hidden h-6 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex'>
          <span className='text-xs'>⌘</span>K
        </kbd>
      </Button>
    </div>
  );
}
