import Link from 'next/link';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Icons } from '@/components/icons';
import { formatDate } from '@/lib/format';
import type { OverviewAnnouncementItem } from '@/features/overview/server/overview-data';

export function DashboardAnnouncements({
  items
}: {
  items: OverviewAnnouncementItem[];
}) {
  return (
    <Card className='h-full'>
      <CardHeader className='flex flex-row items-start justify-between gap-3'>
        <div className='space-y-1'>
          <CardTitle>ประกาศล่าสุด</CardTitle>
          <CardDescription>ประกาศที่เผยแพร่ล่าสุด เรียงประกาศปักหมุดก่อน</CardDescription>
        </div>
        <Button asChild variant='outline' size='sm' className='shrink-0'>
          <Link href='/dashboard/announcements'>ดูประกาศทั้งหมด</Link>
        </Button>
      </CardHeader>
      <CardContent>
        {items.length === 0 ? (
          <div className='text-muted-foreground py-10 text-center text-sm'>
            ยังไม่มีประกาศที่เผยแพร่
          </div>
        ) : (
          <div className='space-y-3'>
            {items.map((item) => (
              <Link
                key={item.id}
                href={item.href}
                className='hover:bg-muted/50 block rounded-lg border p-4 transition-colors'
              >
                <div className='flex items-start justify-between gap-3'>
                  <div className='min-w-0 space-y-2'>
                    <div className='flex flex-wrap items-center gap-2'>
                      <div className='truncate font-medium'>{item.title}</div>
                      {item.isPin ? <Badge variant='outline'>ปักหมุด</Badge> : null}
                    </div>
                    <p className='text-muted-foreground line-clamp-2 text-sm'>{item.content}</p>
                  </div>
                  <Icons.chevronRight className='text-muted-foreground mt-0.5 h-4 w-4 shrink-0' />
                </div>
                <div className='text-muted-foreground mt-3 text-xs'>
                  {formatDate(item.createdAt, { month: 'short' })}
                </div>
              </Link>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
