53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
import { CollaboratorServiceItems } from "@models/Collaborators.model";
|
|
import style from "./SelectableServiceItem.module.css";
|
|
import { formatPrice } from "@helpers/Numbers";
|
|
import { useState } from "react";
|
|
import classNames from "classnames";
|
|
import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
|
|
|
|
export interface SelectableServiceItemProps {
|
|
data: CollaboratorServiceItems;
|
|
onChange?: (serviceId: string, active: boolean) => void;
|
|
}
|
|
|
|
export default function SelectableServiceItem(
|
|
props: SelectableServiceItemProps
|
|
): React.ReactElement {
|
|
const [active, setActive] = useState(props.data.active);
|
|
|
|
const getClassesNames = () => {
|
|
const classList: classNames.ArgumentArray = [];
|
|
|
|
classList.push(style.selectableServiceItem);
|
|
|
|
if (active) {
|
|
classList.push(style.selectableServiceItemActive);
|
|
} else {
|
|
classList.push(style.selectableServiceItemInactive);
|
|
}
|
|
return classNames(classList);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
setActive(!active);
|
|
if (!props.onChange) {
|
|
return;
|
|
}
|
|
props.onChange(props.data.id, !active);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className={getClassesNames()} onClick={handleClick}>
|
|
<div className={style.serviceHeader}>
|
|
<h1>{props.data.name}</h1>
|
|
<ServiceRatingSummary serviceId={props.data.id} variant="row" showOpinionCount={false} />
|
|
</div>
|
|
<p>{props.data.description}</p>
|
|
<span>{formatPrice(props.data.price)}</span>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|