import { Group, Paper, Stack, Text } from '@mantine/core';
import { IconCalendarEvent } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import type { IssuancePeriod } from '@ema-platform/api';

/**
 * Read-only view of the pickup appointment a team leader assigned (spec
 * §19-21 — the office decides who comes in when, the applicant doesn't pick
 * a slot). Shown once payment is confirmed and the licence type prints once
 * and hands the document over in person.
 */
export function PickupSchedulingPanel({
  scheduledDate,
  scheduledPeriod,
}: {
  scheduledDate: string | null;
  scheduledPeriod: IssuancePeriod | null;
}) {
  const { t } = useTranslation();

  return (
    <Paper withBorder p="md" radius="md">
      <Group gap="xs" mb="sm">
        <IconCalendarEvent size={16} />
        <Text fw={600} size="sm">
          {t('pickup.title')}
        </Text>
      </Group>

      {scheduledDate ? (
        <Stack gap={4}>
          <Text size="sm">
            {t('pickup.scheduledFor', {
              date: scheduledDate,
              period:
                scheduledPeriod === 'AFTERNOON'
                  ? t('pickup.afternoon')
                  : t('pickup.morning'),
            })}
          </Text>
          <Text size="sm" c="dimmed">
            {t('pickup.setByOffice')}
          </Text>
        </Stack>
      ) : (
        <Text size="sm" c="dimmed">
          {t('pickup.awaitingSchedule')}
        </Text>
      )}
    </Paper>
  );
}

export default PickupSchedulingPanel;
