import { FC, useEffect } from 'react';
import { Group } from '../../components';
import { SearchInput } from '../../components/SearchInput';
import { useActiveSelectionStore } from '../../store';

export const HomeScene: FC = () => {
  const reset = useActiveSelectionStore((state) => state.reset);

  useEffect(() => {
    reset();
  }, [reset]);

  return (
    <Group className="relative h-full w-full">
      <div className="absolute left-2 top-2 z-19 w-70 flex flex flex-col items-center justify-center gap-2 rounded bg-white shadow-md">
        <Group className="w-full">
          <SearchInput
            placeholder="input search text"
            onSearch={(keyword) => {
              console.log(keyword);
            }}
          />
        </Group>
      </div>
    </Group>
  );
};
