'use client';
import React from 'react';
import { EmptyStateProps, SkeletonRowProps } from '../lib/types';

// ─── Empty State ───────────────────────────────────────────────────────────────

export const EmptyState: React.FC<EmptyStateProps> = ({
  message = 'No plagiarism checks found.',
}) => (
  <tr>
    <td colSpan={6}>
      <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
        <svg
          width="40"
          height="40"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          className="text-slate-300"
        >
          <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <span className="text-sm font-medium">{message}</span>
      </div>
    </td>
  </tr>
);

// ─── Skeleton Row ──────────────────────────────────────────────────────────────

const SkeletonCell: React.FC<{ width?: string }> = ({ width = 'w-24' }) => (
  <td className="px-4 py-3.5">
    <div className={`h-4 ${width} bg-slate-100 rounded animate-pulse`} />
  </td>
);

export const SkeletonRow: React.FC<SkeletonRowProps> = ({ columns }) => {
  const widths = ['w-32', 'w-40', 'w-20', 'w-24', 'w-20', 'w-16'];
  return (
    <tr className="border-b border-slate-100">
      {Array.from({ length: columns }).map((_, i) => (
        <SkeletonCell key={i} width={widths[i] ?? 'w-20'} />
      ))}
    </tr>
  );
};

// ─── Error State ───────────────────────────────────────────────────────────────

interface ErrorStateProps {
  message: string | null | undefined;
  onRetry: () => void;
}

export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => (
  <tr>
    <td colSpan={6}>
      <div className="flex flex-col items-center justify-center py-14 gap-3">
        <div className="flex items-center gap-2 text-red-600 text-sm font-medium">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
          </svg>
          {message}
        </div>
        <button
          onClick={onRetry}
          className="text-xs text-slate-500 underline underline-offset-2 hover:text-slate-800 transition-colors"
        >
          Try again
        </button>
      </div>
    </td>
  </tr>
);