import { FiCheck } from "react-icons/fi"

import { Button } from "@/components/ui/button"
import { RiyalIcon } from "@/components/icons/RandomIcons"
import Link from "next/link"

export type PlanCardProps = {
  title: string
  price: string
  features: string[]
  isPremium?: boolean
}

const PlanCard = ({ title, price, features, isPremium }: PlanCardProps) => {
  return (
    <div className={`w-full md:min-w-80 p-4 ${isPremium ? 'bg-[#052531] text-white' : 'bg-[#F1F5F9] border border-[#CAD5E2]'} rounded-xl`}>
      {isPremium && (
        <div className="flex justify-between">
          <p className="text-lg font-semibold">{title}</p>
          <p className="flex items-center px-2 bg-[#EC003F] text-xs rounded-sm text-white">
            موصى به
          </p>
        </div>
      )}

      {!isPremium && (
        <p className="text-lg font-semibold mb-4 text-[#1D293D]">{title}</p>
      )}

      <div className="my-4 flex items-center justify-center">
        <p className={`flex items-center gap-2 ${isPremium ? 'text-white' : ''}`}>
          <span className="text-3xl font-semibold">{price}</span>
          <RiyalIcon size={25} />
        </p>
        <p className={`text-${isPremium ? '[#CAD5E2]' : '[#62748E]'}`}>
          / سنوياً
        </p>
      </div>

      <div>
        {features.map((feature) => (
          <p key={feature} className={`mb-2 flex items-center gap-2 text-${isPremium ? 'white' : '[#45556C]'} text-lg`}>
            <span className={`bg-${isPremium ? 'white' : '[#45556C]'} block rounded-full p-1 text-white`}>
              <FiCheck size={14} color={isPremium ? '#45556C' : 'white'} />
            </span>
            {feature}
          </p>
        ))}
      </div>

      <Link href="#" className="mt-6 block text-center p-2 bg-white text-[#314158] border border-[#CAD5E2] rounded-full">
        اشترك الان
      </Link>
    </div>
  )
}

export default PlanCard