lti-web-client/src/components/pages/closing/ClosingKandangList.tsx

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

const ClosingKandangList = ({
  initialValue,
  projectData,
}: {
  initialValue?: ClosingGeneralInformation;
  projectData?: ProjectFlock;
}) => {
  return (
    <div className='w-full my-4 @container'>
      <div className='flex flex-col @sm:flex-row gap-4'>
        <div className='w-full'>
          <div className='overflow-x-auto'>
            <h1 className='font-bold my-4'>Kandang</h1>
            <div className='flex flex-wrap gap-2 mb-4'>
              {projectData?.kandangs?.map((kandang) => (
                <Button
                  key={kandang.id}
                  variant='outline'
                  href={`/closing/detail/?closingId=${initialValue?.flock_id}&kandangId=${kandang.project_flock_kandang_id}`}
                  className='min-w-32'
                >
                  {kandang.name}
                </Button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ClosingKandangList;