import { Card } from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from '@/components/ui/carousel';
import { useApiSWR } from '@/hooks/useSWR';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';

type Announcement = {
  id: number;
  title: string;
  message: string;
  banner: string | null;
  expires_at: string | null;
};

export default function AnnouncementsSection() {
  const { data, isLoading } = useApiSWR<Announcement[]>('/user/announcements');
  const { t } = useTranslation();

  if (isLoading) {
    return null;
  }

  if (!data || data.length === 0) return null;

  return (
    <div className="mb-6 space-y-4">
      <Carousel opts={{ align: 'start' }} className="w-full">
        <CarouselContent className="gap-4 py-2">
          {data.map((item) => (
            <CarouselItem key={item.id}>
              <Card className="gap-0 overflow-hidden rounded-2xl border border-[#daeaf9] p-0 shadow-sm dark:border-transparent">
                {item.banner && (
                  <img
                    src={`/${item.banner}`}
                    alt={item.title}
                    className="h-32 w-full object-cover"
                  />
                )}
                <div className="p-4">
                  <h4 className="mb-1 text-sm font-medium">{item.title}</h4>
                  <p className="line-clamp-3 font-lexend text-xs text-black/50 dark:text-white/40">
                    {item.message}
                  </p>
                  {item.expires_at && (
                    <p className="mt-2 font-lexend text-xs text-black/30 dark:text-white/30">
                      {t('Expires')}{' '}
                      {dayjs(item.expires_at).format('MMM DD, YYYY')}
                    </p>
                  )}
                </div>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </div>
  );
}