import { cn } from '@/lib/cn';
import type { Project } from '@/lib/types';

interface ProjectCardProps {
  project: Project;
  onClick: (project: Project) => void;
}

const statusColors: Record<string, string> = {
  active: 'bg-success/20 text-success',
  paused: 'bg-warning/20 text-warning',
  completed: 'bg-blue-600/20 text-blue-400',
  archived: 'bg-gray-600/20 text-gray-400',
};

export function ProjectCard({ project, onClick }: ProjectCardProps): React.ReactElement {
  return (
    <button
      type="button"
      onClick={() => onClick(project)}
      className="w-full rounded-lg border border-surface-border bg-surface-card p-4 text-left transition-colors hover:border-gray-500"
    >
      <div className="flex items-start justify-between">
        <h3 className="text-sm font-medium text-text-primary">{project.name}</h3>
        <span
          className={cn(
            'rounded-full px-2 py-0.5 text-xs',
            statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
          )}
        >
          {project.status}
        </span>
      </div>
      {project.description && (
        <p className="mt-2 line-clamp-2 text-xs text-text-muted">{project.description}</p>
      )}
      <p className="mt-3 text-xs text-text-muted">
        Created {new Date(project.createdAt).toLocaleDateString()}
      </p>
    </button>
  );
}