import { FileText, MessageSquare } from "lucide-react";
import { Group, Stack, Text, Badge, ThemeIcon } from "@mantine/core";

import { SectionCard } from "./SectionCard";
import { formatDateTime, type BookingReviewNoteView } from "./booking-detail.styles";

export interface BookingReviewNotesCardProps {
  notes: BookingReviewNoteView[];
}

/** Chronological list of reviewer / compliance notes. */
export function BookingReviewNotesCard({ notes }: BookingReviewNotesCardProps) {
  if (notes.length === 0) {
    return (
      <SectionCard icon={MessageSquare} title="Review Notes" accent="grape">
        <Text size="sm" c="dimmed">
          No review notes have been added yet.
        </Text>
      </SectionCard>
    );
  }

  return (
    <SectionCard icon={MessageSquare} title="Review Notes">
      <Stack gap="md">
        {notes.map((note) => (
          <Group key={note.id} align="flex-start" gap="md" wrap="nowrap">
            <ThemeIcon size={34} radius="xl" variant="light" color="green">
              <FileText size={16} />
            </ThemeIcon>
            <Stack gap={2} style={{ flex: 1 }}>
              <Group justify="space-between">
                <Badge color="green" variant="light" size="sm" radius="sm">
                  {note.type}
                </Badge>
                <Text size="xs" c="dimmed">
                  {formatDateTime(note.createdAt)}
                </Text>
              </Group>
              <Text size="sm" style={{ lineHeight: 1.5 }}>
                {note.note}
              </Text>
            </Stack>
          </Group>
        ))}
      </Stack>
    </SectionCard>
  );
}