import React, {useState} from 'react';
import './index.scss';
import classNames from "classnames";
function Card({ types, name, urlCard, summary}) {
const typeNames = ['set1', 'set2'];
const [activeType, setActiveType] = useState(0);
const onSelectType = (index) => {
setActiveType(index)
}
return (
<div className="shop_card">
<div className="img_card">
<img
className="image"
src={urlCard}
alt="set1"
/>
</div>
<div className="title_card">
<h2>{name}</h2>
</div>
<div className="setting_card">
<div className="block_settings">
<div className="group_setting">
{typeNames.map((type, index) => (
<div
key={type}
onClick={() => onSelectType(index)}
className={classNames("item_settings",{
active: activeType === index && types.includes(index),
disabled: !types.includes(index),
})}>{type}</div>
))}
</div>
</div>
<div className="block_settings">
<div className="group_setting">
<div className="item_settings">35 .</div>
<div className="item_settings">40 .</div>
<div className="item_settings">45 .</div>
</div>
</div>
</div>
<div className="buy_card">
<div className="pay_ruble">от {summary} ₽</div>
<button
type="button"
className="add_cart"
>
<div className="text_addcart">Добавить</div>
</button>
</div>
</div>
);
}
export default Card;grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 119px) 39%;