import { ExternalLink, Wrench } from 'lucide-react';
import type { Tool } from '../../types';
import Badge from '../ui/Badge';

interface Props {
  tool: Tool;
  onEdit?: () => void;
  onDelete?: () => void;
}

export default function ToolCard({ tool, onEdit, onDelete }: Props) {
  return (
    <div className="group bg-card border border-border rounded-xl p-5 hover:border-[var(--accent)]/40 transition-all duration-200 animate-fade-in">
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1 flex-wrap">
            {tool.is_new && <Badge variant="new">New</Badge>}
            <span className="text-xs text-muted">{tool.category}</span>
          </div>
          <h3 className="font-semibold text-white text-base leading-tight">{tool.name}</h3>
        </div>
        <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 bg-[var(--accent-dim)] border border-[var(--accent)]/20">
          <Wrench size={15} style={{ color: 'var(--accent)' }} />
        </div>
      </div>

      {tool.description && (
        <p className="text-sm text-muted/80 mb-3 line-clamp-3">{tool.description}</p>
      )}

      {tool.notes && (
        <p className="text-xs text-muted/60 italic mb-3 line-clamp-2">{tool.notes}</p>
      )}

      <div className="flex items-center gap-2 mt-auto pt-3 border-t border-border">
        {tool.external_url && (
          <a
            href={tool.external_url}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 text-xs text-muted hover:text-white transition-colors"
          >
            <ExternalLink size={12} /> Open Tool
          </a>
        )}
        <div className="flex-1" />
        {onEdit && (
          <button onClick={onEdit} className="text-xs text-muted hover:text-white transition-colors px-2 py-1 rounded hover:bg-white/5">
            Edit
          </button>
        )}
        {onDelete && (
          <button onClick={onDelete} className="text-xs text-red-400/60 hover:text-red-400 transition-colors px-2 py-1 rounded hover:bg-red-500/5">
            Delete
          </button>
        )}
      </div>
    </div>
  );
}