'use client';

import { useTranslation } from '../../i18n/useTranslation';
import React from 'react'
import { PROFILE_TOKENS } from './styleTokens'

export default function MediaSection({ documents }: { documents: any[] }) {
  const { t } = useTranslation();
  const hasDocuments = Array.isArray(documents) && documents.length > 0;
  return (
    <div className={`${PROFILE_TOKENS.card} p-4 sm:p-6`}>
      <h2 className="text-lg font-semibold text-slate-900 mb-4 break-words">{t('autofix.ked7d533b')}</h2>
      <div className="overflow-x-auto">
        {hasDocuments ? (
          <table className="min-w-full divide-y divide-slate-200">
            <thead className="bg-slate-50/70">
              <tr>
                <th className={PROFILE_TOKENS.tableHead}>Name</th>
                <th className={PROFILE_TOKENS.tableHead}>Type</th>
                <th className={PROFILE_TOKENS.tableHead}>Uploaded</th>
                <th className="px-4 py-2"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {documents.map(doc => (
                <tr key={doc.id} className="bg-white/70 hover:bg-slate-50/70">
                  <td className="px-4 py-2 text-slate-900 break-words">{doc.name}</td>
                  <td className="px-4 py-2 text-slate-600 break-words">{doc.type}</td>
                  <td className="px-4 py-2 text-slate-600 break-words">{doc.uploaded}</td>
                  <td className="px-4 py-2 flex flex-wrap gap-2">
                    {doc.signedUrl ? (
                      <>
                        <a href={doc.signedUrl} download className="px-3 py-1 text-xs font-medium bg-[#8D6B1D] text-white rounded-2xl hover:bg-[#7A5E1A] transition">Download</a>
                        <a href={doc.signedUrl} target="_blank" rel="noopener noreferrer" className="px-3 py-1 text-xs font-medium bg-slate-200 text-slate-700 rounded-2xl hover:bg-slate-300 transition">Preview</a>
                      </>
                    ) : (
                      <span className="text-xs text-slate-400 italic break-words">{t('autofix.kb3243742')}</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="text-slate-500 italic py-6 text-center break-words">{t('autofix.k60b1e339')}</div>
        )}
      </div>
    </div>
  )
}