import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Card, DayHours, SectionTitle } from './VendorDetail.shared';
import type { VendorDetailData } from './VendorDetail.types';

interface VendorDetailHoursSectionProps {
  vendor: VendorDetailData;
  t: (key: string) => string;
  tHours: (key: string) => string;
}

export function VendorDetailHoursSection({ vendor, t, tHours }: VendorDetailHoursSectionProps) {
  return (
    <div>
      <SectionTitle>{t('section_hours')}</SectionTitle>
      <Card>
        {vendor.hours ? (
          <dl>
            <DayHours
              dayLabel={tHours('days_sunday')}
              open={vendor.hours.sundayOpen}
              close={vendor.hours.sundayClose}
              closed={vendor.hours.sundayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_monday')}
              open={vendor.hours.mondayOpen}
              close={vendor.hours.mondayClose}
              closed={vendor.hours.mondayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_tuesday')}
              open={vendor.hours.tuesdayOpen}
              close={vendor.hours.tuesdayClose}
              closed={vendor.hours.tuesdayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_wednesday')}
              open={vendor.hours.wednesdayOpen}
              close={vendor.hours.wednesdayClose}
              closed={vendor.hours.wednesdayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_thursday')}
              open={vendor.hours.thursdayOpen}
              close={vendor.hours.thursdayClose}
              closed={vendor.hours.thursdayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_friday')}
              open={vendor.hours.fridayOpen}
              close={vendor.hours.fridayClose}
              closed={vendor.hours.fridayClosed}
              closedLabel={t('hours_closed')}
            />
            <DayHours
              dayLabel={tHours('days_saturday')}
              open={vendor.hours.saturdayOpen}
              close={vendor.hours.saturdayClose}
              closed={vendor.hours.saturdayClosed}
              closedLabel={t('hours_closed')}
            />
            {vendor.hours.specialNotes && (
              <div className="bg-surface-raised mt-3 rounded-xl p-3 shadow-md">
                <p className="text-text-secondary text-xs font-medium uppercase">
                  {tHours('special_notes')}
                </p>
                <p className="text-text-primary mt-1 text-sm" data-user-displayname>
                  {vendor.hours.specialNotes}
                </p>
              </div>
            )}
          </dl>
        ) : (
          <EmptyState title={t('hours_empty')} className="py-4" />
        )}
      </Card>
    </div>
  );
}