import { Video, Image } from 'lucide-react';
import type { Account } from '@/types';

const MODEL_LABELS: Record<string, string> = {
  gemini: 'Gemini',
  mj: 'MJ',
  gpt: 'GPT',
  kling: 'Kling',
  'veo3-fast': 'Veo3',
  'veo3-fast-frames': 'Veo3F',
  grok: 'Grok',
};

interface Props {
  account: Account;
  isSelected: boolean;
  onClick: () => void;
}

export function AccountCard({ account, isSelected, onClick }: Props) {
  const formatBadge = account.defaultFormat || '9:16';

  return (
    <button
      onClick={onClick}
      className={`w-full text-left rounded-xl p-4 transition-all duration-200 cursor-pointer group
        ${isSelected
          ? 'bg-indigo-50/80 ring-1 ring-indigo-200 shadow-sm shadow-indigo-100/50'
          : 'bg-white border border-zinc-100 hover:border-zinc-200 hover:shadow-lg hover:shadow-zinc-100/80 hover:-translate-y-0.5'}`}
    >
      {/* Top: name + format badge */}
      <div className="flex items-start justify-between mb-2">
        <h3 className="font-semibold text-sm text-zinc-800 truncate flex-1 mr-2">{account.name}</h3>
        <span className={`text-[10px] font-mono px-2 py-0.5 rounded-full ${
          isSelected ? 'bg-indigo-100 text-indigo-600' : 'bg-zinc-100 text-zinc-500'
        }`}>
          {formatBadge}
        </span>
      </div>

      {/* Description */}
      {account.description && (
        <p className="text-xs text-zinc-400 line-clamp-2 mb-3 leading-relaxed">{account.description}</p>
      )}

      {/* Tags */}
      <div className="flex items-center gap-1.5 flex-wrap">
        <span className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-blue-50/80 text-blue-600">
          <Image size={10} />
          {MODEL_LABELS[account.imageModel] || account.imageModel}
        </span>
        <span className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-violet-50/80 text-violet-600">
          <Video size={10} />
          {MODEL_LABELS[account.videoModel] || account.videoModel}
        </span>
        {account.ttsVoice && (
          <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-50/80 text-emerald-600">
            TTS
          </span>
        )}
      </div>
    </button>
  );
}
