import React, {useState} from 'react'
import { ComputerDesktopIcon } from '@heroicons/react/24/outline'

function CreateCard({title, subtitle}:{title:string; subtitle?:string}){
  return (
    <button className="create-card rounded-md hover:shadow-sm p-4 text-left">
      <div className="icon bg-sky-50 text-sky-600 flex items-center justify-center"><ComputerDesktopIcon className="w-6 h-6" /></div>
      <div className="ml-3">
        <div className="font-medium">{title}</div>
        {subtitle && <div className="text-sm text-slate-500">{subtitle}</div>}
      </div>
    </button>
  )
}

export default function Broadcasts(){
  const [tab, setTab] = useState<'upcoming'|'previous'>('upcoming')

  return (
    <div className="max-w-7xl mx-auto">
      <h1 className="text-2xl font-semibold mb-6">Inicio</h1>

      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <CreateCard title="Transmisión en vivo" subtitle="Inicia una transmisión" />
        <CreateCard title="Grabación" subtitle="Inicia una grabación" />
        <CreateCard title="Seminario web On-Air" subtitle="Programar evento" />
      </section>

      <section className="panel p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-medium">Transmisiones y grabaciones</h2>
          <div className="flex items-center gap-2">
            <button className={`tab-btn ${tab==='upcoming'?'active':''}`} onClick={()=>setTab('upcoming')}>Próximamente</button>
            <button className={`tab-btn ${tab==='previous'?'active':''}`} onClick={()=>setTab('previous')}>Anteriores</button>
          </div>
        </div>

        <div className="min-h-[260px] flex items-center justify-center text-slate-500">
          No tienes próximas transmisiones ni grabaciones
        </div>
      </section>
    </div>
  )
}