import { type IssueResponse } from '@/client';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { formatDate } from './config';

interface BoardCardProps {
  issue: IssueResponse;
  onClick: () => void;
}

export function BoardCard({ issue, onClick }: BoardCardProps) {
  return (
    <div
      className="group rounded-lg border bg-card p-3.5 shadow-[0_1px_2px_0_rgba(0,0,0,0.03)] cursor-pointer hover:shadow-sm transition-shadow"
      onClick={onClick}
    >
      {/* Identifier */}
      <p className="text-xs text-muted-foreground">
        #{issue.number}
      </p>

      {/* Title */}
      <p className="mt-1 text-sm font-medium leading-snug line-clamp-2">
        {issue.title}
      </p>

      {/* Description preview */}
      {issue.body && (
        <p className="mt-1 text-xs text-muted-foreground line-clamp-1">
          {issue.body}
        </p>
      )}

      {/* Footer: author + date */}
      <div className="mt-3 flex items-center justify-between">
        <div className="flex items-center gap-1.5">
          {issue.author_username ? (
            <Avatar className="h-5 w-5">
              <AvatarFallback className="text-[9px]">
                {issue.author_username.charAt(0).toUpperCase()}
              </AvatarFallback>
            </Avatar>
          ) : (
            <Avatar className="h-5 w-5">
              <AvatarFallback className="text-[9px]">
                {issue.author?.charAt(0).toUpperCase() ?? '?'}
              </AvatarFallback>
            </Avatar>
          )}
          <span className="text-xs text-muted-foreground truncate max-w-[80px]">
            {issue.author_username || issue.author}
          </span>
        </div>
        <span className="text-xs text-muted-foreground shrink-0">
          {formatDate(issue.created_at)}
        </span>
      </div>
    </div>
  );
}
