import React from 'react';

import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

type TenantHeroCardProps = {
  badge?: string;
  title: string;
  description?: string;
  supporting?: string[];
  primaryAction?: React.ReactNode;
  secondaryAction?: React.ReactNode;
  aside?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
};

export function TenantHeroCard({
  badge,
  title,
  description,
  supporting,
  primaryAction,
  secondaryAction,
  aside,
  children,
  className,
}: TenantHeroCardProps) {
  return (
    <Card
      className={cn(
        'relative overflow-hidden border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/50 backdrop-blur dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100',
        className
      )}
    >
      <CardContent className="relative z-10 flex flex-col gap-6 px-5 py-6 sm:px-6 lg:flex-row lg:items-start lg:justify-between">
        <div className="space-y-4">
          {badge ? (
            <span className="inline-flex items-center gap-2 rounded-full bg-rose-100/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-rose-600 dark:bg-white/15 dark:text-white">
              {badge}
            </span>
          ) : null}

          <div className="space-y-2 text-slate-700 dark:text-slate-100">
            <h1 className="font-display text-2xl font-semibold leading-tight text-slate-900 dark:text-white sm:text-3xl">
              {title}
            </h1>
            {description ? (
              <p className="text-sm text-slate-600 dark:text-white/80">{description}</p>
            ) : null}
            {supporting?.map((paragraph) => (
              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/70">
                {paragraph}
              </p>
            ))}
            {children}
          </div>

          {(primaryAction || secondaryAction) && (
            <div className="flex flex-wrap gap-2">
              {primaryAction}
              {secondaryAction}
            </div>
          )}
        </div>

        {aside ? (
          <div className="rounded-2xl border border-slate-200/70 bg-white/90 p-4 text-sm dark:border-white/10 dark:bg-white/5">
            {aside}
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}

export const tenantHeroPrimaryButtonClass = cn(
  'rounded-full bg-rose-600 px-6 text-sm font-semibold text-white shadow-md shadow-rose-400/30 transition-colors',
  'hover:bg-rose-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
  'dark:focus-visible:ring-offset-slate-950'
);

export const tenantHeroSecondaryButtonClass = cn(
  'rounded-full border border-slate-200/80 bg-white/95 px-6 text-sm font-semibold text-slate-700 shadow-sm transition-colors',
  'hover:bg-rose-50 hover:text-rose-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200 focus-visible:ring-offset-2 focus-visible:ring-offset-white',
  'dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:focus-visible:ring-offset-slate-950'
);