'use client'

import { History } from 'lucide-react'
import {
  ConsentRecord,
  typeColors,
  typeLabels,
  statusColors,
  statusLabels,
  formatDate,
} from '../_types'

interface ConsentRecordRowProps {
  record: ConsentRecord
  onShowDetails: (record: ConsentRecord) => void
}

export function ConsentRecordRow({ record, onShowDetails }: ConsentRecordRowProps) {
  return (
    <tr className="hover:bg-gray-50">
      <td className="px-6 py-4">
        <div className="text-sm font-medium text-gray-900">{record.email}</div>
        <div className="text-xs text-gray-500">{record.identifier}</div>
      </td>
      <td className="px-6 py-4">
        <span className={`px-2 py-1 text-xs rounded-full ${typeColors[record.consentType]}`}>
          {typeLabels[record.consentType]}
        </span>
      </td>
      <td className="px-6 py-4">
        <span className={`px-2 py-1 text-xs rounded-full ${statusColors[record.status]}`}>
          {statusLabels[record.status]}
        </span>
      </td>
      <td className="px-6 py-4 text-sm text-gray-500">
        {formatDate(record.grantedAt)}
      </td>
      <td className="px-6 py-4 text-sm text-gray-500">
        {formatDate(record.withdrawnAt)}
      </td>
      <td className="px-6 py-4">
        <span className="font-mono text-xs bg-gray-100 px-2 py-0.5 rounded">v{record.currentVersion}</span>
      </td>
      <td className="px-6 py-4 text-sm text-gray-500">
        <div className="flex items-center gap-1">
          <History className="w-3 h-3" />
          {record.history.length}
        </div>
      </td>
      <td className="px-6 py-4">
        <button
          onClick={() => onShowDetails(record)}
          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
        >
          Details
        </button>
      </td>
    </tr>
  )
}
