import { ReactNode } from "react";
import clsx from "clsx";

interface DataViewProps {
  children: ReactNode;
  className?: string;
  toolbar?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
}

export const DataView: React.FC<DataViewProps> = ({
  children,
  className = "",
  toolbar,
  header,
  footer,
}) => (
  <section
    className={clsx(
      "rounded-2xl border border-gray-200 bg-white shadow-theme-sm dark:border-white/[0.08] dark:bg-white/[0.04]",
      className,
    )}
  >
    {header && (
      <div className="border-b border-gray-100 px-6 py-4 dark:border-white/[0.08]">
        {header}
      </div>
    )}
    {toolbar && (
      <div className="border-b border-gray-100 px-6 py-3 dark:border-white/[0.08]">
        {toolbar}
      </div>
    )}
    <div className="overflow-x-auto px-4 py-4 sm:px-6">{children}</div>
    {footer && (
      <div className="border-t border-gray-100 px-6 py-4 dark:border-white/[0.08]">
        {footer}
      </div>
    )}
  </section>
);

interface DataViewHeaderProps {
  title: string;
  description?: string;
  actions?: ReactNode;
}

export const DataViewHeader: React.FC<DataViewHeaderProps> = ({
  title,
  description,
  actions,
}) => (
  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h2>
      {description && (
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
      )}
    </div>
    {actions && <div className="flex gap-2">{actions}</div>}
  </div>
);

interface DataViewToolbarProps {
  children: ReactNode;
  className?: string;
}

export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({
  children,
  className = "",
}) => (
  <div
    className={clsx(
      "flex flex-wrap items-center gap-3 text-sm text-gray-700 dark:text-gray-300",
      className,
    )}
  >
    {children}
  </div>
);

interface DataViewEmptyStateProps {
  title: string;
  description: string;
  action?: ReactNode;
}

export const DataViewEmptyState: React.FC<DataViewEmptyStateProps> = ({
  title,
  description,
  action,
}) => (
  <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 px-6 py-12 text-center dark:border-white/10 dark:bg-white/[0.02]">
    <h3 className="text-base font-semibold text-gray-900 dark:text-white">{title}</h3>
    <p className="max-w-md text-sm text-gray-500 dark:text-gray-400">{description}</p>
    {action}
  </div>
);

