'use client';

import React from 'react';
import { Box, Typography, Grid, Button } from '@mui/material';
import { IconCopy } from '@/components/common/Icons';

export default function Page() {
    const data = [
        {
            title: '🚚 Avto Kargo',
            recipient: '777( TT-001)',
            phone: '15532640276',
            address: '主洗车旁1号门777( TT-001)',
        },
        {
            title: '✈️ Avia Kargo',
            recipient: '乌兹777( TT-001)',
            phone: '18922155990',
            address: '楼档口 777( TT-001) AVTO',
        },
    ];

    const copyToClipboard = (text: string) => {
        navigator.clipboard.writeText(text).catch(err => {
            console.error('Nusxa olishda xatolik yuz berdi:', err);
        });
    };

    return (
        <Box p={2}>
            <Box sx={{display: 'flex', flexDirection: 'column', gap: '35px'}}>
                {data.map((item, index) => (
                    <Box key={index}>
                        <Typography variant={'h6'} marginBottom={"10px"}>{item.title}</Typography>
                        <Box sx={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                                <span>收货人:</span>
                                <Box
                                    sx={{
                                        borderBottom: '1px dashed #333',
                                        flexGrow: 1,
                                        position: 'relative',
                                        bottom: '3px',
                                    }}
                                />
                                <Button
                                    variant={'text'}
                                    sx={{ display: 'flex', alignItems: 'center', gap: '3px', height: '19px' }}
                                    onClick={() => copyToClipboard(item.recipient)}
                                >
                                    {item.recipient}
                                    <IconCopy />
                                </Button>
                            </Box>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                                <span>手机号码:</span>
                                <Box
                                    sx={{
                                        borderBottom: '1px dashed #333',
                                        flexGrow: 1,
                                        position: 'relative',
                                        bottom: '3px',
                                    }}
                                />
                                <Button
                                    variant={'text'}
                                    sx={{ display: 'flex', alignItems: 'center', gap: '3px', height: '19px' }}
                                    onClick={() => copyToClipboard(item.phone)}
                                >
                                    {item.phone}
                                    <IconCopy />
                                </Button>
                            </Box>
                            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                                <span>所在地区:</span>
                                <Box
                                    sx={{
                                        borderBottom: '1px dashed #333',
                                        flexGrow: 1,
                                        position: 'relative',
                                        bottom: '3px',
                                    }}
                                />
                                <Button
                                    variant={'text'}
                                    sx={{ display: 'flex', alignItems: 'center', gap: '3px', height: '19px' }}
                                    onClick={() => copyToClipboard(item.address)}
                                >
                                    {item.address}
                                    <IconCopy />
                                </Button>
                            </Box>
                        </Box>
                    </Box>
                ))}
            </Box>
        </Box>
    );
}
