import MetricCard from "./MetricCard"
import UrlDropdown from "./UrlDropdown"

const HeaderPage = ({ title, buttonShow = false }: { title: string, buttonShow?: boolean }) => {
    return (
        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4 justify-between">
            <div className="flex items-baseline gap-4 flex-wrap">
                <h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>

                {/* First SVG dot */}
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="4"
                    height="4"
                    viewBox="0 0 4 4"
                    fill="none"
                    className="flex-shrink-0 -translate-y-1"
                >
                    <circle cx="2" cy="2" r="2" fill="#E9EAF1" />
                </svg>

                <UrlDropdown />

                {/* Second SVG dot */}
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="4"
                    height="4"
                    viewBox="0 0 4 4"
                    fill="none"
                    className="flex-shrink-0 -translate-y-1"
                >
                    <circle cx="2" cy="2" r="2" fill="#E9EAF1" />
                </svg>

                <div className="flex gap-1 flex-wrap">
                    <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
                    <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
                    <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
                </div>

            </div>
            {
                buttonShow &&
                <button className='bg-[#fff] border px-2 sm:px-3 py-2 rounded-lg text-sm sm:text-md font-medium transition-colors flex items-center gap-2'>
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                        <path d="M2.25 12.5735V14.1618C2.25 14.583 2.42779 14.987 2.74426 15.2848C3.06072 15.5827 3.48995 15.75 3.9375 15.75H14.0625C14.5101 15.75 14.9393 15.5827 15.2557 15.2848C15.5722 14.987 15.75 14.583 15.75 14.1618V12.5735M4.78125 6.22059L9 2.25M9 2.25L13.2187 6.22059M9 2.25V11.7794" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>

                    <span>Export to Slides</span>
                </button>
            }
        </div>
    )
}

export default HeaderPage