"use client";

import { useState } from "react";

type Transcript = {
  id: string;
  title: string | null;
  call_date: string;
  content: string;
  created_at: Date;
};

export function TranscriptItem({ transcript }: { transcript: Transcript }) {
  const [expanded, setExpanded] = useState(false);
  const date = new Date(transcript.call_date).toLocaleDateString("it-IT", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });

  return (
    <div className="border border-[#e5e7eb] rounded-lg bg-white overflow-hidden">
      <button
        type="button"
        onClick={() => setExpanded((v) => !v)}
        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[#f9f9f9] transition-colors"
        aria-expanded={expanded}
      >
        <div className="min-w-0">
          <p className="text-sm font-medium text-[#1a1a1a] truncate">
            {transcript.title ?? "Transcript chiamata"}
          </p>
          <p className="text-xs text-[#71717a] mt-0.5">{date}</p>
        </div>
        <svg
          className={`w-4 h-4 text-[#999999] shrink-0 ml-3 transition-transform ${expanded ? "rotate-180" : ""}`}
          fill="none"
          stroke="currentColor"
          strokeWidth={2}
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {expanded && (
        <div className="px-4 pb-4 pt-1 border-t border-[#e5e7eb]">
          <pre className="text-xs text-[#1a1a1a] whitespace-pre-wrap font-sans leading-relaxed max-h-96 overflow-y-auto">
            {transcript.content}
          </pre>
        </div>
      )}
    </div>
  );
}
