import Button from '@/components/Button';
import { ClosingGeneralInformation } from '@/types/api/closing';
import { ProjectFlock } from '@/types/api/production/project-flock';

const ClosingKandangList = ({
  initialValue,
  projectData,
  selectedKandangId,
}: {
  initialValue?: ClosingGeneralInformation;
  projectData?: ProjectFlock;
  selectedKandangId?: number;
}) => {
  return (
    <div className='w-full py-3 @container relative before:absolute before:top-0 before:left-0 before:right-0 before:-mx-4 before:border-t before:border-base-content/10'>
      <div className='flex flex-col @sm:flex-row gap-4'>
        <div className='w-full'>
          <div className='overflow-x-auto'>
            <h1 className='font-bold mb-3'>Kandang</h1>
            <div className='flex flex-wrap gap-2'>
              {projectData?.kandangs?.map((kandang) => (
                <Button
                  key={kandang.id}
                  variant='outline'
                  className='px-3 py-2.5 w-fit text-sm rounded-lg shadow-sm'
                  href={`/closing/detail/?closingId=${initialValue?.flock_id}&kandangId=${kandang.project_flock_kandang_id}`}
                  disabled={
                    selectedKandangId === kandang.project_flock_kandang_id
                  }
                >
                  {kandang.name}
                </Button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ClosingKandangList;