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

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

export function ListRow({ issue, onClick }: ListRowProps) {
  const isOpen = issue.state === 'open';
  return (
    <div
      className="group flex h-11 items-center gap-3 px-4 text-sm hover:bg-muted/50 cursor-pointer transition-colors"
      onClick={onClick}
    >
      {/* Status icon */}
      <div className="shrink-0 w-4 flex items-center justify-center">
        {isOpen ? (
          <Circle className="h-3.5 w-3.5 text-emerald-500" />
        ) : (
          <CheckCircle2 className="h-3.5 w-3.5 text-violet-500" />
        )}
      </div>

      {/* Number */}
      <span className="w-12 shrink-0 text-xs text-muted-foreground">
        #{issue.number}
      </span>

      {/* Title + body preview */}
      <div className="flex flex-1 items-center gap-2 min-w-0">
        <span className="truncate text-sm">{issue.title}</span>
        {issue.body && (
          <span className="shrink-0 truncate text-xs text-muted-foreground hidden sm:inline">
            — {issue.body}
          </span>
        )}
      </div>

      {/* Author */}
      <div className="shrink-0 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>
        ) : null}
        <span className="text-xs text-muted-foreground hidden md:inline">
          {issue.author_username || issue.author}
        </span>
      </div>

      {/* Date */}
      <span className="shrink-0 text-xs text-muted-foreground hidden sm:inline">
        {formatDate(issue.created_at)}
      </span>
    </div>
  );
}
