import CutCornerParentCard from "../global/CutCornerParentCard";
import {
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../ui/card";
import React from "react";
import ButtonOutLineCutCorner from "./ButtonOutLineCutCorner";
interface CardOfServicesProps {
  title: string | React.ReactNode;
  subTitle: string;
  description: string;
  buttonText: string;
}
export default function CardOfServices({
  title,
  subTitle,
  description,
  buttonText,
}: CardOfServicesProps) {
  return (
    <CutCornerParentCard
      bottomRight
      className="min-h-80 md:w-140 xl:w-197 xl:h-87 text-right py-8"
    >
      <CardHeader>
        <CardTitle className="font-black font-rokh text-primary text-xl lg:text-3xl">
          <h1 className="font-black">{title}</h1>
          <p className="text-lg outlined-text mt-1">{subTitle}</p>
        </CardTitle>
      </CardHeader>
      <CardContent className="text-muted-foreground max-w-sm">
        <CardDescription className="hyphens-auto text-sm lg:text-base">
          {description}
        </CardDescription>
        <CardAction className="mt-8">
          <ButtonOutLineCutCorner
            triangle
            triangleClassName="bg-primary"
            className="lg:w-57 lg:h-18 text-sm lg:text-2xl font-bold p-5"
          >
            {buttonText}
          </ButtonOutLineCutCorner>
        </CardAction>
      </CardContent>
    </CutCornerParentCard>
  );
}
