import React from "react";
import { ServiceCardProps } from "../../interfaces/ServiceCard";
import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.style";
import { Card } from "../Card";
import { Icons } from "../Icons";
import { IconType, IconScale } from "../../types";

export const ServiceCard: React.FC<ServiceCardProps> = ({ icon, onClick, disabled = false, description, title}) => {
    return (
        <ServiceCardStyle disabled={disabled} $bColor={icon?.iconColor  || ""}>
            <Card
                variant="outlined"
                onClick={() => {
                    if (disabled) return;
                    onClick && onClick();
                }}
            >
                <TitleContainer>
                    <IconCardStyle $iColor={icon?.iconColor || ""} $bColor={icon?.bgColor || ""}>
                        <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
                    </IconCardStyle>
                    <div className="text">
                        <p className="title">{title}</p>
                        <p className="description">{description}</p>
                    </div>
                </TitleContainer>
            </Card>
        </ServiceCardStyle>
    );
};