'use client';
import AppButton from '@/components/ui/button';
import AppTypography from '@/components/ui/typography';
import React from 'react';

type SubscriptionItemProps = {
  name: string;
  price: number;
};

const SubscriptionItem = ({ name, price }: SubscriptionItemProps) => {
  return (
    <div className="overflow-hidden bg-white border-2 border-gray-100 rounded-md shadow-lg">
      <div className="p-8 xl:px-12">
        <AppTypography
          type="title"
          level={3}
          className="text-base font-semibold text-purple-600"
        >
          {name}
        </AppTypography>
        <AppTypography className="text-5xl font-bold text-black mt-2">
          ${price}/mo
        </AppTypography>
        <div className="mt-2">
          <AppTypography className="text-base text-gray-600">
            One-time payment
          </AppTypography>
        </div>

        <ul className="inline-flex flex-col items-start space-y-2 text-left mt-4">
          <li className="inline-flex items-center space-x-2">
            {/* <CheckIcon className="w-5 h-5 text-indigo-500" /> */}
            <AppTypography className="text-base font-medium text-gray-900">
              5 webhooks
            </AppTypography>
          </li>
        </ul>

        <AppButton className="text-5xl w-full inline-flex items-center justify-center px-10 py-4 mt-2 text-base font-semibold text-white">
          Get started
        </AppButton>
      </div>
    </div>
  );
};

export default SubscriptionItem;