Edit Professional Info

import {useState} from "react";
import { EditPersonalInfo } from "@/components/ui/edit-professional-info"

export default function Profile(){
    const [profile,setProfile] = useState({
        img:"https://github.com/rayimanoj8.png",
        fullName:"Manoj",
        summary:"Engineer in the field of Computer Science from Pragati Engineering College.",
        id:"rayimanoj8",
        location:"Kakinada",
        linkedin:"https://linkedin.com/in/rayimanoj8",
        github:"https://github.com/rayimanoj8",
        mail:"rayimanoj8@gmail.com",
    })
    console.log(profile)
    return (
        <div className="w-[400px] mx-auto space-y-3 my-4">
            <Card className="relative">
                <CardHeader>
                    <CardTitle>
                        Professional Details
                    </CardTitle>
                </CardHeader>
                <CardContent >
                    <EditPersonalInfo profile={profile} setProfile={setProfile}/>
                    <ul className="flex flex-col">
                        <li>
                            <Button
                                variant="link"
                            >
                                <Mail/> {profile.mail}
                            </Button>
                        </li>
                        <li>
                            <Button
                                variant="link"
                            >
                                <Linkedin/> {profile.linkedin}
                            </Button>
                        </li>
                        <li>
                            <Button
                                variant="link"
                            >
                                <Github/> {profile.github}
                            </Button>
                        </li>
                        <li>
                            <div className="px-4 py-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
                                <MapPin /> {profile.location}
                            </div>
                        </li>
                    </ul>
                </CardContent>
            </Card>
        </div>
    )
}