"use client";

import Image from "next/image";

interface ContactInfoProps {
    contactPerson: {
        name: string;
        avatar: string;
    };
    requisites: {
        ip: string;
        inn: string;
        ogrn: string;
    };
}

export function ContactInfo({ contactPerson, requisites }: ContactInfoProps) {
    return (
        <div className="flex flex-col sm:flex-row gap-5">
            <div className="flex-1 rounded-[24px] px-6 py-5 bg-[#f4f4f4]">
                <div className="flex items-center gap-4 h-full">
                    <div className="relative rounded-full overflow-hidden bg-gray-200 flex items-center justify-center">
                        <Image
                            src="/images/avatar.png"
                            alt={contactPerson.name}
                            width={124}
                            height={124}
                        />
                    </div>
                    <div className="flex flex-col justify-between h-full">
                        <h3 className="text-base font-bold text-[#333333]">
                            {contactPerson.name}
                        </h3>
                        <p className="text-base text-[#333333]">
                            Контактное лицо
                        </p>
                    </div>
                </div>
            </div>

            <div className="flex-1 rounded-[24px] px-6 py-5 bg-[#f4f4f4]">
                <h3 className="text-base font-bold text-[#333333] mb-3">
                    Реквизиты
                </h3>
                <div className="space-y-2">
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-base text-[#333333]">ИП</span>
                        <span className="text-base text-[#999999]">
                            {requisites.ip}
                        </span>
                    </div>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-base text-[#333333]">ИНН</span>
                        <span className="text-base text-[#999999]">
                            {requisites.inn}
                        </span>
                    </div>
                    <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-base text-[#333333]">
                            ОГРН/ОГРНИП
                        </span>
                        <span className="text-base text-[#999999]">
                            {requisites.ogrn}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
}
