import { Card, Input, Button, Typography, Space, App } from 'antd';
import { CopyOutlined, ShareAltOutlined } from '@ant-design/icons';
import type { DashboardReferral } from './types';

interface ReferralCardProps {
  referral: DashboardReferral;
}

export default function ReferralCard({ referral }: ReferralCardProps) {
  const { message } = App.useApp();

  const handleCopyLink = () => {
    navigator.clipboard.writeText(referral.link).then(() => {
      message.success('Share link copied');
    });
  };

  const handleCopyCode = () => {
    navigator.clipboard.writeText(referral.code).then(() => {
      message.success('Code copied');
    });
  };

  return (
    <Card
      title={
        <Space>
          <ShareAltOutlined />
          <span>Invite Friends</span>
        </Space>
      }
      styles={{ body: { padding: 20 } }}
    >
      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
        <Typography.Paragraph type="secondary" style={{ marginBottom: 0, fontSize: 13 }}>
          Share your referral link with friends. You've referred <strong>{referral.totalReferrals}</strong> {referral.totalReferrals === 1 ? 'person' : 'people'} so far.
        </Typography.Paragraph>
        <Input.Group compact style={{ display: 'flex' }}>
          <Input
            value={referral.link}
            readOnly
            style={{ flex: 1 }}
            onClick={(e) => (e.target as HTMLInputElement).select()}
          />
          <Button type="primary" icon={<CopyOutlined />} onClick={handleCopyLink}>
            Copy
          </Button>
        </Input.Group>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            Your code:
          </Typography.Text>
          <Typography.Text code strong style={{ fontSize: 14, letterSpacing: 1 }}>
            {referral.code}
          </Typography.Text>
          <Button size="small" icon={<CopyOutlined />} onClick={handleCopyCode}>
            Copy code
          </Button>
        </div>
      </Space>
    </Card>
  );
}
