import React from "react";
import {
  Card,
  CardHeader,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

const SubscriptionCard = ({ title, price, description, features, isDaily }) => (
  <div
    className={`sm:w-[40%] w-full sm:p-7 ${
      isDaily ? "bg-[#B48D4F] text-white" : "bg-[#F9F5EF] text-zinc-800"
    }`}
  >
    <CardHeader>
      <h2 className="text-2xl font-bold sm:text-4xl sm:pb-3">{title}</h2>
      <p className="text-2xl font-semibold">{price}</p>
    </CardHeader>
    <CardContent>
      <p className="mb-4 py-3">{description}</p>
      <ul className="list-disc pl-5">
        {features.map((feature, index) => (
          <li key={index} className="mb-2 sm:mb-6">
            {feature}
          </li>
        ))}
      </ul>
    </CardContent>
    <CardFooter>
      <button
        className={`${
          isDaily ? "bg-black text-white" : "bg-[#B48D4F] "
        }text-zinc-50 px-4 py-3 `}
      >
        Subscribe
      </button>
    </CardFooter>
  </div>
);

const PoojaSubscription = () => (
  <>
    <h1 className="text-2xl sm:text-5xl text-center sm:pt-16">
      Pooja Subscription
    </h1>
    <p className="sm:text-lg text-center pt-2 sm:pb-14 pb-4">
      Experience divine blessings at your doorstep. Subscribe to our Pooja
      services for spiritual harmony.
    </p>

    <div className="flex sm:flex-row flex-col justify-center sm:space-x-8">
      <SubscriptionCard
        title="Daily Subscription"
        price="Rs. 4,400.00"
        description="A certified Pundit will perform a Rudrabhishek and Chandi Path every day at the premises of Lord Pashupatinath temple for you and your family members!"
        features={[
          "Pooja Performed every day",
          "High-quality Video Shared everyday",
          "Includes 2 certified Pundits",
          "Brahman Bhoojan (meal) included",
          "New Material used every day",
          "Prasad Shared every month",
          "Special requests accepted if applicable",
        ]}
        isDaily={true}
      />
      <SubscriptionCard
        title="Monthly Subscription"
        price="Rs. 9,500.00"
        description="A certified Pundit will perform a Rudrabhishek every month at the premises of Lord Pashupatinath temple for you and your family members!"
        features={[
          "A Rudraksha Expert to answer your questions and provide Rudraksha consultation",
          "Pooja Performed every month",
          "High-quality Video Shared monthly",
          "Includes 1 certified Pundits",
          "Brahman Bhoojan (meal) included",
          "New Material used every month",
        ]}
        isDaily={false}
      />
    </div>
  </>
);

export default PoojaSubscription;