import { ArrowLeftIcon } from '@phosphor-icons/react';
import { ReactNode } from 'react';
import { Button } from '../ui/button';

export default function PageHeading({
  title,
  description,
  variant = 'admin',
  backButton = false,
  actionButton,
}: {
  title: string;
  description?: string;
  variant?: 'default' | 'admin';
  backButton?: boolean;
  actionButton?: ReactNode;
}) {
  return variant === 'admin' ? (
    <div className="mb-4 flex flex-row items-center justify-between gap-2 md:ml-2">
      <div className="flex items-center">
        {backButton && (
          <Button
            type="button"
            size="icon"
            variant="outline"
            className="min-w-10"
            onClick={() => history.back()}
          >
            <ArrowLeftIcon weight="bold" />
          </Button>
        )}
        <div className="px-2 py-2 md:px-4">
          <h3 className="mb-1 text-xl font-medium md:text-2xl">{title}</h3>
          <p className="text-sm text-black/50">{description}</p>
        </div>
      </div>
      {actionButton && actionButton}
    </div>
  ) : (
    <div className="mb-4 flex flex-col justify-between gap-4 px-4 py-2 md:flex-row md:items-center">
      <div className="flex items-center gap-3">
        {backButton && (
          <Button
            type="button"
            size="icon"
            variant="ghost"
            className="shrink-0 bg-secondary"
            onClick={() => history.back()}
          >
            <ArrowLeftIcon weight="bold" />
          </Button>
        )}
        <div>
          <h3 className="mb-1 text-xl font-semibold text-card-foreground md:text-2xl">
            {title}
          </h3>
          {description && (
            <p className="text-sm font-light text-black/50 dark:text-white/50">
              {description}
            </p>
          )}
        </div>
      </div>

      {actionButton && actionButton}
    </div>
  );
}