// components/vendors/ContactCard.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Globe, Mail, MapPin, Phone, User } from 'lucide-react'

interface Address {
    street: string
    city: string
    state: string
    zip: number
}

interface ContactCardProps {
    contactPerson?: string | null
    email?: string | null
    phone?: string | null
    website?: string | null
    address?: Address | null
}

export function ContactCard({ contactPerson, email, phone, website, address }: ContactCardProps) {
    return (
        <Card>
            <CardHeader>
                <CardTitle>Contact Information</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {contactPerson && (
                        <div className="flex items-start gap-3">
                            <User className="h-5 w-5 text-muted-foreground mt-0.5" />
                            <div>
                                <p className="text-sm text-muted-foreground">Contact Person</p>
                                <p className="font-medium">{contactPerson}</p>
                            </div>
                        </div>
                    )}
                    
                    {email && (
                        <div className="flex items-start gap-3">
                            <Mail className="h-5 w-5 text-muted-foreground mt-0.5" />
                            <div>
                                <p className="text-sm text-muted-foreground">Email</p>
                                <a 
                                    href={`mailto:${email}`}
                                    className="font-medium hover:text-primary hover:underline"
                                >
                                    {email}
                                </a>
                            </div>
                        </div>
                    )}
                    
                    {phone && (
                        <div className="flex items-start gap-3">
                            <Phone className="h-5 w-5 text-muted-foreground mt-0.5" />
                            <div>
                                <p className="text-sm text-muted-foreground">Phone</p>
                                <a 
                                    href={`tel:${phone}`}
                                    className="font-medium hover:text-primary hover:underline"
                                >
                                    {phone}
                                </a>
                            </div>
                        </div>
                    )}
                    
                    {website && (
                        <div className="flex items-start gap-3">
                            <Globe className="h-5 w-5 text-muted-foreground mt-0.5" />
                            <div>
                                <p className="text-sm text-muted-foreground">Website</p>
                                <a 
                                    href={website}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="font-medium hover:text-primary hover:underline"
                                >
                                    {website.replace(/^https?:\/\//, '')}
                                </a>
                            </div>
                        </div>
                    )}
                </div>
                
                {address && (
                    <>
                        <Separator />
                        <div className="flex items-start gap-3">
                            <MapPin className="h-5 w-5 text-muted-foreground mt-0.5" />
                            <div>
                                <p className="text-sm text-muted-foreground">Address</p>
                                <p className="font-medium">
                                    {address.street}<br />
                                    {address.city}, {address.state} {address.zip}
                                </p>
                            </div>
                        </div>
                    </>
                )}
            </CardContent>
        </Card>
  )
}