'use client'
import React, { useState } from 'react'
import { Card, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'

const fileTypes = ["JPG", "PNG", "GIF"];

const BlockProfileSettings = () => {
    const [file, setFile] = useState(null);
    const handleChange = (file: any) => {
        setFile(file);
    };

    return (
        <div className='space-y-5'>
            <h1 className='text-gray-700 text-lg font-semibold'>System Settings</h1>
            <div className='grid md:grid-cols-6 gap-4 '>
                <Card className='md:col-span-4 p-2'>
                    <CardContent className='grid gap-5 md:grid-cols-2'>
                        <div className='space-y-2'>
                            <Label>Company Name</Label>
                            <Input placeholder='Enizam' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Contact Person</Label>
                            <Input placeholder='Daniel Porter' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Phone Number</Label>
                            <Input placeholder='Enizam' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Country</Label>
                            <Input placeholder='USA' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Default Email</Label>
                            <Input placeholder='any@gmail.com' />
                        </div>
                        <div className='space-y-2'>
                            <Label>State</Label>
                            <Input placeholder='California' />
                        </div>
                        <div className='grid gap-5 md:col-span-2 md:grid-cols-2'>
                            <div className='grid gap-5'>
                                <div className='space-y-2'>
                                    <Label>Website Url</Label>
                                    <Input placeholder='https://www.example.com' />
                                </div><div className='space-y-2'>
                                    <Label>Default Language</Label>
                                    <Input placeholder='Enizam' />
                                </div>
                            </div>
                            <div className='space-y-2'>
                                <Label>Address</Label>
                                <Textarea rows={6} />
                            </div>
                        </div>
                    </CardContent>
                </Card>
                <Card className='md:col-span-2 p-2'>
                    <CardContent className='md:grid-cols-2 '>
                    </CardContent>
                </Card>
            </div>
            <h1 className='text-gray-700 text-lg font-semibold'>Profile Settings</h1>
            <div className='grid md:grid-cols-6 gap-4'>
                <Card className='md:col-span-4 p-2'>
                    <CardContent className='grid gap-5 md:grid-cols-2'>
                        <div className='space-y-2'>
                            <Label>First Name</Label>
                            <Input placeholder='David' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Last Name</Label>
                            <Input placeholder='Jordan' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Phone Number</Label>
                            <Input placeholder='Enizam' />
                        </div>
                        <div className='space-y-2'>
                            <Label>Email</Label>
                            <Input placeholder='any@gmail.com' />
                        </div>
                        <div className='space-y-2'>
                            <Label>City</Label>
                            <Input placeholder='California' />
                        </div>
                        <div className='space-y-2'>
                            <Label>State</Label>
                            <Input placeholder='California' />
                        </div>
                        <div className='grid gap-5 md:col-span-2 md:grid-cols-2'>
                            <div className='grid gap-5'>
                                <div className='space-y-2'>
                                    <Label>Country</Label>
                                    <Input placeholder='USA' />
                                </div><div className='space-y-2'>
                                    <Label>Zip Code</Label>
                                    <Input placeholder='000000' />
                                </div>
                            </div>
                            <div className='space-y-2'>
                                <Label>Address</Label>
                                <Textarea rows={6} />
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card className='md:col-span-2 p-2'>
                    <CardContent className='md:grid-cols-2 '>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}

export default BlockProfileSettings