// components/vendors/NotesCard.tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { FileText } from 'lucide-react'

interface NotesCardProps {
    notes?: string | null
    contractUrl?: string | null
    proposalUrl?: string | null
}

export function NotesCard({ notes, contractUrl, proposalUrl }: NotesCardProps) {
    if (!notes && !contractUrl && !proposalUrl) return null
    
    return (
        <Card>
            <CardHeader>
                <CardTitle>Notes & Documents</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                {notes && (
                    <div>
                        <p className="text-sm text-muted-foreground mb-2">Notes</p>
                        <p className="text-sm whitespace-pre-wrap">{notes}</p>
                    </div>
                )}
                
                {(contractUrl || proposalUrl) && (
                    <div className="space-y-2">
                        <p className="text-sm text-muted-foreground">Documents</p>
                        <div className="flex flex-wrap gap-2">
                            {contractUrl && (
                                <Button variant="outline" size="sm" asChild>
                                    <a href={contractUrl} target="_blank" rel="noopener noreferrer">
                                        <FileText className="h-4 w-4 mr-2" />
                                        View Contract
                                    </a>
                                </Button>
                            )}
                            {proposalUrl && (
                                <Button variant="outline" size="sm" asChild>
                                    <a href={proposalUrl} target="_blank" rel="noopener noreferrer">
                                        <FileText className="h-4 w-4 mr-2" />
                                        View Proposal
                                    </a>
                                </Button>
                            )}
                        </div>
                    </div>
                )}
            </CardContent>
        </Card>
  )
}