"use client"
import { useRouter } from "next/navigation";

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

interface Network {
    id: number;
    name: string;
    ipv4Subnet?: string;
    ipv6Subnet?: string;
    gateway?: string;
}

export default function Sites({ id, name, description, networks }: SitesProps) {
    const router = useRouter();
    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.map((network) => network.name).join(", ")}</p>
                )}
                <div className="card-actions justify-end">
                    <button className="btn btn-secondary btn-sm btn-outline" onClick={() => router.push(`/dashboard/sites/${id}`)}>View</button>
                </div>
            </div>
        </div>
    )
}