import { Appearance, TableSize } from "../../../types/table.types";


type VariantStyles = {
  root: string;

  table: string;

  tableThead: string;
  tableTheadRow: string;
  tableTheadCell: string;

  tableTbody: string;
  tableTbodyRow: string;
  tableTbodyCell: string;

  pagination: string;
};

type SizeStyles = {
  tableTheadCell: string;
  tableTbodyCell: string;
  tableTbodyRow: string;
};

export const tableVariants: {
  appearance: Record<Appearance, VariantStyles>;
  size: Record<TableSize, SizeStyles>;
} = {
  appearance: {
    default: {
      root: "rounded-xl border border-slate-200 bg-white shadow-sm",

      table: "w-full",

      tableThead: "bg-slate-50",
      tableTheadRow: "border-b border-slate-200",
      tableTheadCell: "text-left font-medium text-slate-700",

      tableTbody: "border-t border-slate-300/50 relative",
      tableTbodyRow: "hover:bg-slate-50 border-b border-slate-100",
      tableTbodyCell: "text-slate-700",

      pagination: "border-t border-slate-200 bg-slate-50",
    },

    card: {
      root: "rounded-2xl border border-slate-200 bg-slate-100 p-4 shadow-sm",

      table: "w-full",

      tableThead: "bg-transparent",
      tableTheadRow: "border-b border-slate-200",
      tableTheadCell: "text-left font-medium text-slate-700",

      tableTbody: "border-t border-slate-300/50 relative",
      tableTbodyRow: "border-b border-slate-200 bg-white",
      tableTbodyCell: "text-slate-700",

      pagination: "border-t border-slate-200 bg-white",
    },

    minimal: {
      root: "bg-transparent",

      table: "w-full",

      tableThead: "",
      tableTheadRow: "",
      tableTheadCell: "text-left font-medium",

      tableTbody: "border-t border-slate-300/50 relative",
      tableTbodyRow: "",
      tableTbodyCell: "",

      pagination: "bg-transparent",
    },
  },

  size: {
    sm: {
      tableTheadCell: "px-3 py-2 text-xs",
      tableTbodyCell: "px-3 py-2 text-sm",
      tableTbodyRow: "",
    },

    md: {
      tableTheadCell: "",
      tableTbodyCell: "",
      tableTbodyRow: "",
    },

    lg: {
      tableTheadCell: "",
      tableTbodyCell: "",
      tableTbodyRow: "",
    },
  },
};