import type { AssetSourceType } from "@/features/studio/types/studio";

interface SourceCardProps {
  source: {
    key: AssetSourceType;
    title: string;
    description: string;
  };
  isSelected: boolean;
  onToggle: (source: AssetSourceType) => void;
}

export function SourceCard({ source, isSelected, onToggle }: SourceCardProps) {
  return (
    <button
      type="button"
      onClick={() => onToggle(source.key)}
      className={[
        "relative w-full text-left p-5 rounded-2xl border-2 transition-all",
        isSelected
          ? "border-violet-500 bg-status-good-bg/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]"
          : "border-neutral-20 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-status-good-border",
      ].join(" ")}
    >
      <div className="flex items-center gap-3">
        {/* 체크박스 인디케이터 */}
        <div className={[
          "w-5 h-5 rounded border-2 shrink-0 flex items-center justify-center transition-all",
          isSelected
            ? "border-violet-500 bg-violet-500"
            : "border-neutral-40 bg-white",
        ].join(" ")}>
          {isSelected && (
            <svg width="10" height="10" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M2 7L5.5 10.5L12 3.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          )}
        </div>

        <div>
          <h4 className="font-semibold text-navy-900 mb-1 break-keep">{source.title}</h4>
          <p className="text-sm text-neutral-60 break-keep">{source.description}</p>
        </div>
      </div>
    </button>
  );
}