// import React from 'react'
// import { Typography, Button, Image, Row, Col, Card } from 'antd'
// import { TeamOutlined, SyncOutlined, RocketOutlined } from '@ant-design/icons'
// import workimage from '../images/teamwork.png';

// const { Title, Paragraph } = Typography

// export default function WorkInTeam() {
//   return (
//     <Card className="border-white">
//       <Row gutter={[32, 32]} align="middle">
//         <Col xs={24} md={12}>
//         <img
//             src={workimage}
//             alt="Работа в команде"
//             className="w-full h-auto rounded-lg"
//           />
//         </Col>
//         <Col xs={24} md={12}>
//           <Title level={2} className="mb-4 ">
//             Работайте в команде!
//           </Title>
//           <Paragraph className="text-lg mb-6">
//             Эффективная командная работа - ключ к успеху любого проекта. Наша платформа предоставляет инструменты для seamless коллаборации и повышения продуктивности вашей команды.
//           </Paragraph>
//           <Row gutter={[16, 16]}>
//             <Col span={24}>
//               <Card size="small" className="flex items-center shadow-lg">
//                 <TeamOutlined className="text-2xl mr-4 text-blue-500" />
//                 <div>
//                   <Title level={5} className="mb-1">Совместная работа</Title>
//                   <Paragraph className="m-0">Легко делитесь задачами и информацией</Paragraph>
//                 </div>
//               </Card>
//             </Col>
//             <Col span={24}>
//               <Card size="small" className="flex items-center shadow-lg">
//                 <SyncOutlined className="text-2xl mr-4 text-green-500" />
//                 <div>
//                   <Title level={5} className="mb-1 ">Синхронизация в реальном времени</Title>
//                   <Paragraph className="m-0">Всегда будьте в курсе последних изменений</Paragraph>
//                 </div>
//               </Card>
//             </Col>
//             <Col span={24}>
//               <Card size="small" className="flex items-center shadow-lg">
//                 <RocketOutlined className="text-2xl mr-4 text-red-500" />
//                 <div>
//                   <Title level={5} className="mb-1">Повышение эффективности</Title>
//                   <Paragraph className="m-0">Достигайте целей быстрее вместе с командой</Paragraph>
//                 </div>
//               </Card>
//             </Col>
//           </Row>
//         </Col>
//       </Row>
//     </Card>
//   )
// }

import React from 'react';
import { Typography, Row, Col, Card } from 'antd';
import { TeamOutlined, WechatOutlined, SmileOutlined } from '@ant-design/icons';
import workimage from '../images/teamwork.png';
import translations from '../translations.json';
import { useLanguage } from '../contexts/LanguageContext';

const { Title, Paragraph } = Typography;

export default function WorkInTeam() {
  const { language } = useLanguage();
  const t = translations.workInTeam[language];

  const features = [
    {
      icon: WechatOutlined,
      key: 'collaboration',
      color: 'blue'
    },
    {
      icon: TeamOutlined,
      key: 'realTime',
      color: 'green'
    },
    {
      icon: SmileOutlined,
      key: 'efficiency',
      color: 'red'
    }
  ];

  return (
    <Card className="border-white">
      <Row gutter={[32, 32]} align="middle">
        <Col xs={24} md={12}>
          <img
            src={workimage}
            alt={t.imageAlt}
            className="w-full h-auto rounded-lg"
          />
        </Col>
        <Col xs={24} md={12}>
          <Title level={2} className="mb-4">
            {t.title}
          </Title>
          <Paragraph className="text-lg mb-6">
            {t.description}
          </Paragraph>
          <Row gutter={[16, 16]}>
            {features.map((feature) => (
              <Col span={24} key={feature.key}>
                <Card size="small" className="flex items-center shadow-lg">
                  <feature.icon className={`text-2xl mr-4 text-${feature.color}-500`} />
                  <div>
                    <Title level={5} className="mb-1">
                      {t.features[feature.key].title}
                    </Title>
                    <Paragraph className="m-0">
                      {t.features[feature.key].description}
                    </Paragraph>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </Col>
      </Row>
    </Card>
  );
}