interface SitesProps {
    id: string;
    name: string;
    description: string;
    networks: string[];
}

export default function Sites({ id, name, description, networks }: SitesProps) {
    return (
        <div className="card bg-base-200 shadow-xl">
            <div className="card-body">
                <h2 className="card-title">{name}</h2>
                <p>{description}</p>
                { networks && networks.length > 0 && (
                    <p>Networks: {networks.join(', ')}</p>
                )}
                <div className="card-actions justify-end">
                    <button className="btn btn-secondary btn-sm btn-outline">View</button>
                </div>
            </div>
        </div>
    )
}