import type { PropsWithChildren, ReactNode } from "react";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import type { LIconProps } from "@/components/ui/lucid-icon/lucid-icon";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";

interface AdditionalServicesTitleProps {
  title: string;
}

export interface AdditionalServicesCardProps extends PropsWithChildren {
  title: string;
  description?: string;
  price: string;
  active?: boolean;
  showIcon?: boolean;
  icon?: LIconProps["name"];
  priceInfo?: string;
  buttonContent?: ReactNode;
  onClickMoreInfo?: () => void;
}

const AdditionalServicesWrapper = ({ children }: PropsWithChildren) => {
  return <Card className="flex flex-col gap-4 p-4">{children}</Card>;
};

const AdditionalServicesTitle = ({ title }: AdditionalServicesTitleProps) => {
  return <span className="text-xl font-semibold text-gray-800">{title}</span>;
};

const AdditionalServicesDescription = ({
  description,
}: {
  description: string;
}) => {
  return (
    <span className="text-sm font-medium text-gray-500">{description}</span>
  );
};

const AdditionalServicesCard = ({
  title,
  description,
  price,
  active,
  showIcon,
  children,
  buttonContent,
  icon,
  onClickMoreInfo,
  ...props
}: AdditionalServicesCardProps) => {
  const { t } = useLocale();
  const { priceInfo = t("Total") } = props;
  return (
    <Card
      className={cn("grid grid-cols-12 p-4", active && " border-primary-500 ")}
    >
      <div className="sm:flex-row-unset col-span-12 flex grid-cols-12 flex-row-reverse items-center justify-between gap-2 sm:col-span-8 sm:grid">
        <span className="col-span-1">
          {showIcon && <LIcon name={icon ?? "Shield"} size={18} />}
        </span>
        <span className="col-span-11 flex flex-col items-start justify-center text-sm font-medium text-gray-800">
          <span>{title}</span>
          {description && (
            <span className="text-xs text-gray-500">{description}</span>
          )}
          {onClickMoreInfo && (
            <Button
              variant="primary-text"
              type="button"
              onClick={onClickMoreInfo}
              className="!h-7 !p-0"
            >
              {t("More Information")}
              <LIcon name="ChevronRight" size={16} />
            </Button>
          )}
        </span>
      </div>
      <div className="col-span-12 flex flex-col justify-end gap-2 sm:col-span-4 sm:items-center lg:flex-row">
        {price && (
          <span className="whitespace-nowrap text-xs font-medium text-gray-500">
            {priceInfo}: {price}
          </span>
        )}
        {buttonContent}
      </div>
      {children}
    </Card>
  );
};

export {
  AdditionalServicesCard,
  AdditionalServicesDescription,
  AdditionalServicesTitle,
  AdditionalServicesWrapper,
};