import React from 'react';
import { cn } from '@/lib/utils';

export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'section' | 'div';
}

export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
  return (
    <Tag
      className={cn(
        'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
        className,
      )}
      {...props}
    />
  );
}

interface SectionHeaderProps {
  eyebrow?: string;
  title: string;
  description?: string;
  endSlot?: React.ReactNode;
  className?: string;
}

export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
  return (
    <div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
      <div>
        {eyebrow ? (
          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
        ) : null}
        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
        {description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
      </div>
      {endSlot}
    </div>
  );
}