'use client';
import * as React from 'react';
import { Icon } from '@/lib/icons';
import { TINTS, AD_TINTS, CATS, AD_CATS } from '@/lib/data';

type PhotoProps = {
  cat: string;
  h?: number | string;
  radius?: number;
  label?: React.ReactNode;
  idx?: number;
  children?: React.ReactNode;
  style?: React.CSSProperties;
};

export function Photo({ cat, h = 180, radius = 18, label, idx = 0, children, style }: PhotoProps) {
  const t = TINTS[cat] || ['#ECE6DC', '#CFC4B2', '#897E6C'];
  const angles = [135, 160, 110, 200, 125];
  const iconName = CATS.find((c) => c.key === cat)?.icon || 'sparkles';
  const big = typeof h === 'number' ? h > 150 : true;
  return (
    <div
      className="ph"
      style={{
        height: h,
        borderRadius: radius,
        background: `linear-gradient(${angles[idx % 5]}deg, ${t[1]} 0%, ${t[0]} 58%, ${t[1]} 100%)`,
        ...style,
      }}
    >
      <Icon name={iconName} size={big ? 60 : 40} stroke={1.4} style={{ color: t[2] }} />
      {label && <div className="ph-label">{label}</div>}
      {children}
    </div>
  );
}

type ProductPhotoProps = PhotoProps & { icon?: string };
export function ProductPhoto({ cat, icon, h = 170, idx = 0, radius = 14, label, style, children }: ProductPhotoProps) {
  const t = AD_TINTS[cat] || ['#ECE6DC', '#CFC4B2', '#897E6C'];
  const angles = [135, 160, 110, 200, 125];
  const fallbackIcon = AD_CATS.find((c) => c.key === cat)?.icon || 'tag';
  const big = typeof h === 'number' ? h > 150 : true;
  return (
    <div
      className="ph"
      style={{
        height: h,
        borderRadius: radius,
        background: `linear-gradient(${angles[idx % 5]}deg, ${t[1]} 0%, ${t[0]} 58%, ${t[1]} 100%)`,
        ...style,
      }}
    >
      <Icon name={icon || fallbackIcon} size={big ? 56 : 38} stroke={1.4} style={{ color: t[2] }} />
      {label && <div className="ph-label">{label}</div>}
      {children}
    </div>
  );
}