"use client"
import { useRouter } from "next/navigation";
import { Site } from "@/app/types";
import { ChevronRight } from "lucide-react";

export default function Sites({ id, name, description, networks }: Site) {
    const router = useRouter();
    return (
        <div className="relative group bg-base-100 border border-base-200 rounded-xl shadow-xl overflow-hidden h-48" style={{ display: 'block' }}>
            <div className="p-6 pr-20 h-full flex flex-col">
                <h2 className="text-xl font-bold">{name}</h2>
                
                {description ? (
                    <p className="text-sm opacity-70 mt-2 line-clamp-2">{description}</p>
                ) : (
                    <p className="text-sm opacity-50 italic mt-2">No description provided</p>
                )}
                
                <div className="mt-auto">
                    {networks && networks.length > 0 ? (
                        <div className="mt-3">
                            <p className="text-sm font-medium mb-1">Networks:</p>
                            <div className="bg-base-200 p-2 rounded-lg overflow-y-auto max-h-16">
                                {networks.map((network, index) => (
                                    <span key={network.id || index} className="inline-block bg-base-300 rounded px-2 py-1 text-xs mr-2 mb-1">
                                        {network.name}
                                    </span>
                                ))}
                            </div>
                        </div>
                    ) : (
                        <div className="mt-3">
                            <p className="text-sm opacity-60">No networks configured</p>
                        </div>
                    )}
                </div>
            </div>
            
            <div 
                onClick={() => router.push(`/dashboard/sites/${id}`)}
                className="absolute top-0 right-0 bottom-0 h-full w-12 bg-primary hover:bg-primary-focus text-primary-content flex items-center justify-center cursor-pointer transition-colors"
            >
                <ChevronRight className="h-8 w-8" />
            </div>
        </div>
    );
}