"use client";

import React from 'react';
import type { Source } from "@/lib/types";

type Props = {
    sources: Source[];
    title?: string;
};

export function SourcesList({ sources, title = "Sources & References" }: Props) {
    if (!sources?.length) return null;

    return (
        <section className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 my-8">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
            <ol className="space-y-2 list-decimal list-inside">
                {sources.map((source, index) => (
                    <li key={index} className="text-sm text-gray-700">
                        <cite className="not-italic">
                            <a
                                href={source.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-blue-600 hover:text-blue-800 hover:underline"
                            >
                                {source.name}
                            </a>
                        </cite>
                        {source.accessDate && (
                            <span className="text-gray-500 ml-2">
                                (accessed {source.accessDate})
                            </span>
                        )}
                    </li>
                ))}
            </ol>
        </section>
    );
}
