import React from 'react';

import { formatCurrency } from '@/packages/shared/src/utils';
import { format } from 'date-fns';

import { Button } from '@kit/ui/shadcn/button';
import { Card } from '@kit/ui/shadcn/card';
import { Trans } from '@kit/ui/trans';

import { AvailableAppointmentsResponse } from '~/lib/types/connected-online';

const dummyData: AvailableAppointmentsResponse['Data']['T_Booking'] = [
  {
    ServiceID: 1,
    StartTime: new Date('2024-10-10T10:00:00Z'),
    EndTime: new Date('2024-10-10T11:00:00Z'),
    HKServiceID: 0,
    ClinicID: '',
    LocationID: 0,
    UserID: 0,
    SyncUserID: 0,
    PayorCode: '',
  },
  {
    ServiceID: 1,
    StartTime: new Date('2024-10-10T11:00:00Z'),
    EndTime: new Date('2024-10-10T12:00:00Z'),
    HKServiceID: 0,
    ClinicID: '',
    LocationID: 0,
    UserID: 0,
    SyncUserID: 0,
    PayorCode: '',
  },
  {
    ServiceID: 2,
    StartTime: new Date('2024-10-10T12:00:00Z'),
    EndTime: new Date('2024-10-10T13:00:00Z'),
    HKServiceID: 0,
    ClinicID: '',
    LocationID: 0,
    UserID: 0,
    SyncUserID: 0,
    PayorCode: '',
  },
];

const TimeSlots = () => {
  return (
    <div className="flex w-full flex-col gap-2">
      {dummyData.map((data) => (
        <Card
          className="flex justify-between p-4"
          key={data.ServiceID + '-time-slot'}
        >
          <div>
            <span>{format(data.StartTime.toString(), 'HH:mm')}</span>
            <div className="flex">
              <h5 className="after:mx-2 after:content-['·']">
                Dr. Jüri Mardikas
              </h5>
              <span className="after:mx-2 after:content-['·']">Kardioloog</span>
              <span>Tervisekassa aeg</span>
            </div>
            <div className="flex text-xs">
              <span className="after:mx-2 after:content-['·']">
                Ülemiste Tervisemaja 2
              </span>
              <span className="after:mx-2 after:content-['·']">
                Ülemiste füsioteraapiakliinik
              </span>
              <span className="after:mx-2 after:content-['·']">
                Sepapaja 2/1
              </span>
              <span>Tallinn</span>
            </div>
          </div>
          <div className="flex-end flex items-center justify-center gap-2">
            <span className="text-sm font-semibold">
              {formatCurrency({
                currencyCode: 'EUR',
                locale: 'et-EE',
                value: 20,
              })}
            </span>
            <Button>
              <Trans i18nKey="Broneeri" />
            </Button>
          </div>
        </Card>
      ))}
    </div>
  );
};

export default TimeSlots;