"use client";

interface YachtCharacteristicsProps {
    yacht: {
        year: number;
        maxCapacity: number;
        comfortableCapacity: number;
        length: number;
        width: number;
        cabins: number;
        material: string;
        power: number;
    };
}

export function YachtCharacteristics({ yacht }: YachtCharacteristicsProps) {
    const characteristics = [
        { label: "Год", value: yacht.year },
        {
            label: "Максимальная вместимость",
            value: `${yacht.maxCapacity} человек`,
        },
        {
            label: "Комфортная вместимость",
            value: `${yacht.comfortableCapacity} человек`,
        },
        { label: "Длина", value: `${yacht.length} м` },
        { label: "Ширина", value: `${yacht.width} м` },
        { label: "Каюты", value: yacht.cabins },
        { label: "Материал", value: yacht.material },
        { label: "Мощность", value: `${yacht.power} л/с` },
    ];

    return (
        <div>
            <h2 className="text-base font-bold text-[#333333] mb-4">
                Характеристики
            </h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
                {characteristics.map((char, index) => (
                    <div
                        key={index}
                        className="flex justify-between items-center py-4 border-b border-gray-200"
                    >
                        <span className="text-base text-[#999999]">
                            {char.label}
                        </span>
                        <span className="text-base font-regular text-[#333333]">
                            {char.value}
                        </span>
                    </div>
                ))}
            </div>
        </div>
    );
}
