import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import { DatajudProcesso } from "../../types/datajud";

interface ProcessoInfoProps {
  data: DatajudProcesso;
}

export const ProcessoInfo = ({ data }: ProcessoInfoProps) => {
  return (
    <div className="bg-white rounded-lg shadow p-6 space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <InfoItem label="Classe" value={data.classe.nome} />
        <InfoItem
          label="Data de Ajuizamento"
          value={format(new Date(data.dataAjuizamento), "dd/MM/yyyy", {
            locale: ptBR,
          })}
        />
        <InfoItem label="Grau" value={data.grau} />
        <InfoItem label="Formato" value={data.formato.nome} />
        <InfoItem label="Sistema" value={data.sistema.nome} />
        <InfoItem label="Órgão Julgador" value={data.orgaoJulgador.nome} />
      </div>

      {data.assuntos.length > 0 && (
        <div className="mt-4">
          <h4 className="font-medium text-gray-700 mb-2">Assuntos</h4>
          <div className="flex flex-wrap gap-2">
            {data.assuntos.map((assunto) => (
              <span
                key={assunto.codigo}
                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
              >
                {assunto.nome}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

function InfoItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-sm font-medium text-gray-500">{label}</dt>
      <dd className="mt-1 text-sm text-gray-900">{value}</dd>
    </div>
  );
}

export default ProcessoInfo;