import { Button } from "@/components/ui/button"

interface RentalContractCardProps {
  classNames?: string;
  title: string;
  price: string;
  buttonText: string;
  buttonDisabled?: boolean;
  features: string[];
  showButtonIcon?: boolean;
  onClick?: () => void;
}

const RentalContractCard = ({
  classNames,
  title,
  price,
  buttonText,
  buttonDisabled = false,
  features,
  showButtonIcon = true,
  onClick
}: RentalContractCardProps) => {

  return (
    <div className={`flex flex-col bg-[#F1F5F9] border-2 border-[#CAD5E2] rounded-xl overflow-hidden ${classNames}`}>
      <div className="flex flex-col gap-4 text-white bg-[#052531] p-6 text-center">
        <div className="text-xl font-medium">{title}</div>
        <div className="flex items-center justify-center gap-2">
          <span className="text-2xl font-bold">{price}</span>
          <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0_5288_19274)">
              <path d="M11.2023 17.7177C10.8811 18.4258 10.6687 19.1942 10.5874 20L17.3848 18.5635C17.706 17.8556 17.9181 17.0871 17.9996 16.2812L11.2023 17.7177Z" fill="white" />
              <path d="M17.3851 14.2599C17.7063 13.552 17.9187 12.7835 18 11.9776L12.7051 13.0972V10.945L17.385 9.9563C17.7062 9.2484 17.9185 8.47985 17.9998 7.67405L12.7049 8.79265V1.0527C11.8936 1.50558 11.173 2.10842 10.5873 2.81951V9.24028L8.46967 9.68776V0C7.65833 0.452726 6.93778 1.05572 6.35206 1.76681V10.1351L1.61387 11.136C1.29267 11.8439 1.08019 12.6125 0.998683 13.4183L6.35206 12.2873V14.9976L0.61487 16.2096C0.293664 16.9175 0.0813422 17.6861 0 18.4919L6.00523 17.2232C6.49408 17.1221 6.91425 16.8347 7.18741 16.4393L8.28874 14.8161V14.8158C8.40306 14.6478 8.46967 14.4454 8.46967 14.2273V11.8398L10.5873 11.3923V15.6967L17.385 14.2596L17.3851 14.2599Z" fill="white" />
            </g>
            <defs>
              <clipPath id="clip0_5288_19274">
                <rect width="18" height="20" fill="white" />
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>

      <div className="p-5 flex-1 flex flex-col justify-between">
        <div>
          {features.map((feature, index) => (
            <div key={index} className="flex items-center gap-2 mt-1">
              <CheckIcon />
              <span className="text-lg">{feature}</span>
            </div>
          ))}
        </div>
        <Button
          className="mt-6 p-6 w-full rounded-full text-lg font-normal disabled:bg-[#D4D4D8] disabled:text-[#9F9FA9]"
          disabled={buttonDisabled}
          onClick={onClick}
        >
          {buttonText}
          {showButtonIcon && (
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-2">
              <path d="M12.6668 7.99998H3.3335M3.3335 7.99998L8.00016 12.6666M3.3335 7.99998L8.00016 3.33331" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          )}
        </Button>
      </div>
    </div>
  )
}

const CheckIcon = () => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.6668 5L7.50016 14.1667L3.3335 10" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

export default RentalContractCard