import { useAppStore } from '../store';

type LabelProps = {
  title: string;
  children?: any;
};
export const Label = (props: LabelProps) => {
  const { title } = props;
  return (
    <div className='flex'>
      <div className='font-medium'>{title}:</div>
      <div className='ml-2 line-clamp-3'>{props.children}</div>
    </div>
  );
};
export const Left = () => {
  const appStore = useAppStore();
  return (
    <div className='flex-shrink-0'>
      <div className='px-4 py-2 max-h-[300px] overflow-auto scrollbar'>
        <Label title='Title'>{appStore.data?.title}</Label>
        <Label title='Description'>{appStore.data?.description}</Label>
      </div>
      <div className='h-0.5 bg-gray-500'></div>
      <div className='mt-4 px-2 text-xs'>
        {appStore.nodes?.map?.((node, index) => {
          return (
            <div className='hover:bg-gray-300 p-2 cursor-pointer' key={node.id}>
              {node.id}
            </div>
          );
        })}
      </div>
    </div>
  );
};
